<template>
  <view class="conter">
    <view class="header-img" @click="imgUploading">
     <image :src="headUrl ? headUrl : defaultDheadUrl"></image>
     <view class="circle"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Role_camera_icon.png"></image></view>
    </view>
    <view class="select-box">
      <view 
        class="select-naem" 
        v-for="(item,index) in selectBox" 
        :key="item.index"
        :class="altveIndex == index ? 'altveIndex' : ''" 
        @click="selectClick(index)"
      >
      {{ item.label }}
      </view>
    </view>
    <view class="set-name-date">
      <view class="iconfont-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Role_my_icon.png"></image></view>
      <view class="divide"></view>
      <input placeholder="请输入角色名" placeholder-style="font-size: 28rpx; color: #8C8C8C;"/>
    </view>
    <view class="set-name-date" style="margin: 64rpx 0 404rpx 0;">
      <view class="iconfont-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Role_birthday_icon.png"></image></view>
      <view class="divide"></view>
      <picker mode="date" :value="dateTime" @change="bindDateChange">
        <view class="uni-input" v-if="dateTime" style="font-size: 28rpx; color: #262626;">{{dateTime}}</view>
        <view class="uni-input" v-else style="font-size: 28rpx; color: #8C8C8C;">{{dateText}}</view>
      </picker>
    </view>
    <view class="footer-btn">提交</view>
  </view>
</template>

<script>
  export default{
    data() {
      return{
        headUrl:'', // 头像
        defaultDheadUrl: require('@/static/my/avatar.png'), // 默认头像
        imgSize:2*1024*1024,//定义图片大小
        dateText: '请选择日期',
        dateTime: '',
        altveIndex: 0,
        selectBox: [ { label: '男孩', value: 1}, { label: '女孩', value: 2}]
      }
    },
   onLoad() {
     this.$wechat.unseBehavior()
   },
    methods:{
      // 图片上传
      imgUploading() {
        const vm = this
        uni.chooseImage({
          count: 1,
          sizeType: ['album','camera'],
          success: function(res) {
            const formData = res.tempFilePaths
            if(res.tempFiles[0].size > vm.imgSize){
              wx.showModal({ content: '上传图片不能大于2M!', showCancel: false })
              return false;
            }
            uni.uploadFile({
              url: 'https://openapi.jinlinjishu.com/api/blob/file',
              filePath: formData[0],
              header:{ 'Authorization': uni.getStorageSync('authorization') },
              method:'post',
              name: 'file',
              formData: {
                fileContainerName:'course_resources',
                fileType: 2,
                generateUniqueFileName: false,
                parentId: '39ffd31a-eb72-a20a-734b-4c3d51e2d96e'
              },
              success: (res) => {
                console.log("上传成功:",res)
                const data = JSON.parse(res.data)
                vm.headUrl = data.downloadInfo.previewUrl
              }
            })
          }
        })
      },
      // 日期下拉框事件
      bindDateChange(e) {
        this.dateTime = e.target.value
     },
      // 单选
      selectClick(index) {
        this.altveIndex = index
         console.log("下标:",this.altveIndex)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
    padding: 128rpx 64rpx 88rpx 64rpx;
    .header-img{
      width: 184rpx;
      height: 184rpx;
      border-radius: 50%;
      position: relative;
      margin: auto;
      .circle{
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        width: 48rpx;
        height: 48rpx;
      }
    }
    .select-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 112rpx 0 64rpx 0;
      .select-naem{
        width: 288rpx;
        height: 96rpx;
        background: #FFFFFF;
        border: 2rpx solid #E5E5E5;
        box-sizing: border-box;
        box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.05);
        border-radius: 54rpx;
        font-size: 32rpx;
        color: #8C8C8C;
        text-align: center;
        line-height: 96rpx;
      }
      .altveIndex{
        width: 288rpx;
        height: 96rpx;
        background: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Component%20256.png") no-repeat;
        background-size: 100% 100%;
        border: none;
        box-shadow: none;
        color: #FF800C;
      }
    }
    .set-name-date{
      width: 100%;
      height: 96rpx;
      background: #FFFFFF;
      border: 2rpx solid #EEEEEE;
      box-sizing: border-box;
      box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.05);
      border-radius: 54rpx;
      display: flex;
      align-items: center;
      .iconfont-img{
       width: 48rpx;
       height: 48rpx;
       margin-left: 50rpx;
      }
      .divide{
        width: 2rpx;
        height: 32rpx;
        background: #EEEEEE;
        margin: 0 32rpx 0 36rpx;
      }
    }
    .footer-btn{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 88rpx;
      width: 528rpx;
      height: 88rpx;
      background: #FF800C;
      border-radius: 44rpx;
      line-height: 88rpx;
      text-align: center;
      color: #FFFFFF;
      margin: auto;
    }
  }
</style>
